$(function () {


    showData();


    //当摁enter键的时候对数据进行更新保存
    $('#title').on('keydown', function (e) {
        if (e.keyCode === 13) {
            if ($(this).val()) {
                var data = getData();
                data.push({ title: $(this).val(), done: false })
                saveData(data);
                showData();
                $(this).val('');
            } else {
                alert('请输入字符串后在摁enter');
            }
        }
    })

    //当摁按钮时候
    $('button').on('click', function () {
        if ($(this).siblings('#title').val()) {
            var data = getData();
            data.push({ title: $(this).siblings('#title').val(), done: false })
            saveData(data);
            showData();
            $(this).siblings('#title').val('');
        } else {
            alert('请输入字符串后在摁enter');
        }
    })

    //当摁复选框时候
    $('ol,ul').on('click', 'input', function () {
        var data = getData();
        var index = $(this).siblings('a').attr('id');
        data[index].done = $(this).prop('checked');
        saveData(data);
        showData();
    })

    //当摁删除键时候
    $('ol,ul').on('click', 'a', function () {
        var data = getData();
        var index = $(this).attr('id');
        data.splice(index, 1);
        saveData(data);
        showData();
    })
    //构建展示函数
    function showData() {
        $('ul, ol').empty();
        var data = getData();
        var todoCount = 0; // 正在进行的个数
        var doneCount = 0; // 已经完成的个数
        $.each(data, function (i, n) {
            if (n.done) {
                $("#donelist").prepend("<li><input type='checkbox'  checked='checked' > <p>" + n.title + "</p> <a href='javascript:;' id=" + i + " ></a></li>")
                doneCount++;
            } else {
                $("#todolist").prepend("<li><input type='checkbox' > <p>" + n.title + "</p> <a href='javascript:;' id=" + i + " ></a></li>")
                todoCount++;
            }
        })
        $('#todocount').text(todoCount);
        $('#donecount').text(doneCount);
    }

    //构建读取数据函数
    function getData() {
        var data = localStorage.getItem('data');
        if (data == null) {
            return [];
        } else {
            return JSON.parse(data);
        }
    }

    //构建保存数据到浏览器的函数
    function saveData(data) {
        localStorage.setItem('data', JSON.stringify(data));
    }
})